<template>
  <div class="menu-aside">
    <el-menu
      router 
      class="el-menu-vertical-demo"
      @open="handleOpen" 
      @close="handleClose" 
      :collapse="isCollapse">
      <el-menu-item @click="isCollapse = !isCollapse">
          <i v-show="isCollapse==false" class="el-icon-d-arrow-left"></i>
          <i v-show="isCollapse==true" class="el-icon-d-arrow-right"></i>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-setting"></i><span slot="title">公共管理</span>
        </template>
        <el-menu-item index="/admin">数据统计</el-menu-item>
        <el-menu-item index="/admin/personalInfo">个人信息</el-menu-item>
        <el-menu-item index="/admin/secretKeyManage">密钥管理</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-document"></i><span slot="title">文章管理</span>
        </template>
        <el-menu-item index="/admin/articletypes">文章类型</el-menu-item>
        <el-menu-item index="/admin/addArticle">添加文章</el-menu-item>
        <el-menu-item index="/admin/articleList">文章列表</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-user"></i><span slot="title">用户管理</span>
        </template>
        <el-menu-item index="/admin/userEdit" >客户端用户管理</el-menu-item>
        <el-menu-item index="/admin/adminUserEdit">管理端用户管理</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-operation"></i><span slot="title">网站管理</span>
        </template>
        <el-menu-item index="/admin/websiteInfo">网站信息</el-menu-item>
        <el-menu-item index="/admin/slidesShow">首页轮播</el-menu-item>
        <el-menu-item index="/admin/guestBook">留言管理</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  import Icon from './Icon'
  export default {
    components: {
      Icon
    },
    data() {
      return {
        isCollapse: false,
        websiteInfo: {
          zhName: 'GDHZ',
          engName: '',
          iconUrl: '',
          master: ''
        }
      };
    },
    mounted() {
      this.getWebsiteInfo()
    },
    methods: {
      async getWebsiteInfo() {
        let res = await this.api.get('/getWebsiteInfo')
        if (res.code == 0 && res.data.length !== 0) this.websiteInfo = res.data
        else this.$message({type: 'warning', message: '请添加网站信息'})
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      }
    }
  }
</script>

<style lang="scss">
.menu-aside {
  // border-right: solid 1px #e6e6e6;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu {
    border-right: none;
  }
}
 
</style>